<template>
    <div>
        <el-menu
                class="el-menu-vertical-demo"
                style="width:200px;min-height:calc(100vh - 50px);"
                :default-active="activeMenu"
                :default-openeds="openeds"
        >
            <router-link :to="{path: '/index' }">
                <el-menu-item index="Index">
                    <i class="el-icon-menu"></i>
                    <template #title>首页</template>
                </el-menu-item>
            </router-link>
            <el-sub-menu :index="menu.name" v-for="menu in menuList">
                <template #title>
                    <i :class="menu.icon"></i>
                    <span>{{ menu.title }}</span>
                </template>
                <router-link :to="{path: item.path }" v-for="item in menu.children">
                    <el-menu-item :index="item.name">
                        <i :class="item.icon"></i>
                        <template #title>{{ item.title }}</template>
                    </el-menu-item>
                </router-link>
            </el-sub-menu>
        </el-menu>
    </div>
</template>

<script>
    export default {
        name: "Aside",
        data() {
            return {
                openeds: ['Home', 'sys:manage']
            }

        },
        methods: {},
        computed: {
            activeMenu() {
                return this.$store.state.menus.editableTabsValue
            },
            menuList() {
                return this.$store.state.menus.menuList
            }
        },
    }
</script>

<style scoped>
</style>
